import { Button, Modal, Select, Input, Upload, message } from "antd";
import React, { useState, useEffect } from "react";
import { WarningOutlined } from "@ant-design/icons";
import AntDatePicker from "./AntDatePicker";
import axios from "axios";

const { TextArea } = Input;

export function AntDelBtnModal(props) {
  const [delModalOpen, setDelModalOpen] = useState(false);
  const { id, fn } = props;
  const showModal = () => {
    setDelModalOpen(true);
    console.log(id);
  };
  const handleOk = () => {
    setDelModalOpen(false);
    console.log("删除数据", id.key);
    fn(id.key);
  };
  const handleCancel = () => {
    setDelModalOpen(false);
  };

  return (
    <>
      <Button size="small" onClick={showModal}>
        删除
      </Button>
      <Modal
        open={delModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        centered
        cancelText="取消"
        okText="确定"
        width={250}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            flexDirection: "column",
          }}
        >
          <WarningOutlined
            style={{
              color: "orange",
              fontSize: "80px",
              fontWeight: "bold",
            }}
          />
          <p
            style={{
              fontSize: "20px",
              fontWeight: "500",
            }}
          >
            确定删除?
          </p>
        </div>
      </Modal>
    </>
  );
}

export function AntFollowBtnModal(props) {
  const [followModalOpen, setFollowModalOpen] = useState(false);

  // 上传props
  const uploadProps = {
    name: "file",
    action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
    headers: {
      authorization: "authorization-text",
    },
    onChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

  const showModal = () => {
    setFollowModalOpen(true);
  };
  const handleOk = () => {
    setFollowModalOpen(false);

    // 跟进请求
    axios({
      url: "http://127.0.0.1:4523/m1/1894961-0-default/purchase/follow",
      params: {
        CustmerNum: props.id.key,
      },
      method: "POST",
    })
      .then((res) => {
        console.log(res.data.msg);
        message.success("更新成功");
      })
      .catch((err) => console.error(err));
  };

  const handleCancel = () => {
    setFollowModalOpen(false);
  };

  // 选择1
  const [Select1, setSelect1] = useState("到访");
  const [Select2, setSelect2] = useState("了解产品");
  const [textIpt, setTextIpt] = useState("");

  // 选择1选项
  const options1 = [
    {
      value: "daofang",
      label: "到访",
    },
    {
      value: "dianhua",
      label: "电话",
    },
    {
      value: "weixin",
      label: "微信",
    },
    {
      value: "duanxin",
      label: "短信",
    },
    {
      value: "youjian",
      label: "邮件",
    },
    {
      value: "qq",
      label: "QQ",
    },
    {
      value: "qita",
      label: "其他",
    },
  ];

  // 选择2选项
  const options2 = [
    {
      value: "liaojie",
      label: "了解产品",
    },
    {
      value: "genjin",
      label: "正在跟进",
    },
    {
      value: "shiyong",
      label: "正在试用",
    },
    {
      value: "zhunbei",
      label: "准备购买",
    },
    {
      value: "yijing",
      label: "已经购买",
    },
    {
      value: "gezhi",
      label: "暂时搁置",
    },
  ];

  const onSelect1 = (values) => {
    setSelect1(values);
  };

  const onSelect2 = (values) => {
    setSelect2(values);
  };

  // 文本域的值
  const onTextAreaChange = (values) => {
    setTextIpt(values.target.value);
  };

  return (
    <>
      <Button size="small" onClick={showModal}>
        跟进
      </Button>
      <Modal
        title="新建跟进"
        open={followModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        centered
        cancelText="取消"
        okText="确定"
        width={480}
      >
        <Select
          defaultValue="到访"
          style={{
            width: 200,
            marginRight: 10,
          }}
          onChange={onSelect1}
          options={options1}
          value={Select1}
        />
        <AntDatePicker></AntDatePicker>
        <TextArea
          showCount
          maxLength={300}
          onChange={onTextAreaChange}
          placeholder="填写跟进内容"
          style={{
            width: 415,
            marginTop: 10,
            height: 180,
          }}
          value={textIpt}
        />
        <Upload {...uploadProps}>
          <Button>上传附件</Button>
        </Upload>
        <div>
          <span>客户名称 : </span>
          <Input
            placeholder="哈坎大哈公司"
            style={{
              width: 200,
              marginTop: 10,
              marginLeft: 10,
            }}
            disabled
          />
        </div>
        <div>
          <span>客户状态 : </span>
          <Select
            defaultValue="到访"
            style={{
              width: 200,
              marginRight: 10,
              marginTop: 10,
              marginLeft: 10,
            }}
            onChange={onSelect2}
            options={options2}
            value={Select2}
          />
        </div>
        <div>
          <span>联系人 : </span>
          <Input
            placeholder="可口可乐"
            style={{
              width: 200,
              marginTop: 10,
              marginLeft: 23,
            }}
            disabled
          />
        </div>
      </Modal>
    </>
  );
}

export function AntWorkSheetModal(props) {
  const [WorkSheetModalOpen, setWorkSheetModalOpen] = useState(false);

  const showModal = () => {
    setWorkSheetModalOpen(true);
  };

  const handleOk = () => {
    setWorkSheetModalOpen(false);

    // 新建工单请求
    axios({
      url: "http://127.0.0.1:4523/m1/1894961-0-default/purchase/createworksheet",
      params: {},
      method: "POST",
    })
      .then((res) => {
        console.log(res.data.msg);
        message.success("新建成功");
      })
      .catch((err) => console.error(err));
  };

  const handleCancel = () => {
    setWorkSheetModalOpen(false);
  };

  // 上传props
  const uploadProps = {
    name: "file",
    action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
    headers: {
      authorization: "authorization-text",
    },
    onChange(info) {
      if (info.file.status !== "uploading") {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === "done") {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };

  return (
    <>
      <Button size="small" onClick={showModal}>
        工单
      </Button>
      <Modal
        title="新建工单"
        open={WorkSheetModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        centered
        cancelText="取消"
        okText="保存"
        width={480}
      >
        <div>
          <span>关联客户 : </span>
          <Input
            placeholder={props.id.SupplierName}
            style={{
              width: 350,
              marginTop: 10,
              marginLeft: 10,
            }}
            disabled
          />
        </div>
        <div>
          <span>关联订单 : </span>
          <Input
            placeholder={props.id.PurchaseNum}
            style={{
              width: 350,
              marginTop: 10,
              marginLeft: 10,
            }}
            disabled
          />
        </div>
        <div>
          <span>工单类型 : </span>
          <Select
            defaultValue="选择类型"
            style={{
              width: 350,
              marginLeft: 10,
              marginTop: 10,
            }}
          />
        </div>
        <div>
          <span>工单标题 : </span>
          <Input
            placeholder="填写标题"
            style={{
              width: 350,
              marginTop: 10,
              marginLeft: 10,
            }}
          />
        </div>
        <div>
          <span>工单内容 : </span>
          <TextArea
            showCount
            maxLength={300}
            placeholder="填写工单内容"
            style={{
              width: 350,
              marginTop: 10,
              height: 180,
              marginLeft: 10,
              display: "inline-block",
            }}
          />
        </div>
        <div>
          <span>紧急状态 : </span>
          <Select
            defaultValue="选择类型"
            style={{
              width: 350,
              marginLeft: 10,
              marginTop: 10,
            }}
          />
        </div>
        <div>
          <span>上传附件 : </span>
          <Upload {...uploadProps}>
            <Button
              style={{
                marginLeft: 10,
                marginTop: 10,
              }}
            >
              选择附件
            </Button>
          </Upload>
        </div>
      </Modal>
    </>
  );
}

export function XiuGai(props) {
  console.log(props);
  const [delModalOpen, setDelModalOpen] = useState(false);
  const showModal = () => {
    setDelModalOpen(true);
  };
  const handleOk = () => {
    setDelModalOpen(false);
    axios({
        url: "http://127.0.0.1:4523/m1/1894961-0-default/purchase/xiugai",
        params: {
          CustmerNum: props.id.key,
        },
        method: "POST",
      })
        .then((res) => {
          console.log(res.data.msg);
          message.success("付款成功");
        })
        .catch((err) => console.error(err));
  };
  const handleCancel = () => {
    setDelModalOpen(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        设为已付款
      </Button>
      <Modal
        open={delModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
        centered
        cancelText="取消"
        okText="确定"
        width={250}
      >
        <div
          style={{
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            flexDirection: "column",
          }}
        >
          <WarningOutlined
            style={{
              color: "orange",
              fontSize: "80px",
              fontWeight: "bold",
            }}
          />
          <p
            style={{
              fontSize: "20px",
              fontWeight: "500",
            }}
          >
            是否确定将订单状态设为已付款
          </p>
        </div>
      </Modal>
    </>
  );
}
